<template>
  <view class="page">
    <u-navbar autoBack fixed placeholder bgColor="#ffffff">
      <template #left>
        <view class="navBar">
          <u-icon name="arrow-left" color="#000" size="18"></u-icon>
          <text class="nav_title">文创详情</text>
        </view>
      </template>
    </u-navbar>
    <scroll-view scroll-y class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }" >
      <view class="head-img">
        <image :src="detail.merchandiseHeadImg"></image>
        <view class="blank"></view>
      </view>
      <view class="detail">
        <view class="part1">
          <view class="price">￥ {{detail.merchandisePrice}}</view>
          <view class="desc">{{detail.merchandiseName}}</view>
          <u-line color="#F3F3F3" margin="9px 0 0"></u-line>
          <view class="footer">
            <uni-icons type="shop" color="#999999"></uni-icons>
            <view>{{qiyeDetail.address}} {{detail.onSaleStatus == '0' ? '无货' : '有售'}}</view>
          </view>
        </view>
        <view class="part2">
          <view class="header">
            <view class="title">图文介绍</view>
            <view class="title2">PICTURE AND TEXT DETAILS</view>
          </view>
        </view>
        <view v-html="detail.merchandiseIntroduce" class="rich"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {culturalAndCreativeDetail, qiyeDetail} from "@/api/culture";

export default {
  onLoad(options) {
    const { id } = options
    this.getMerDetail(id)
  },
  data() {
    return {
      detail: {},
      qiyeDetail: {}
    };
  },
  computed: {
    navBarHeight() {
      const platform = uni.getSystemInfoSync().platform
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let navHeight = 0
      if (['ios', 'devtools'].includes(platform)) {
        navHeight = 44
      } else {
        navHeight = 48
      }
      return navHeight + statusBarHeight
    },
  },
  methods: {
    async getMerDetail(id) {
      const { code, data, msg } = await culturalAndCreativeDetail({
        id
      })
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.detail = data
      await this.getQiyeDetail(data.qiyeId)
    },
    async getQiyeDetail(qiyeId) {
      const { code, data, msg } = await qiyeDetail({
        id: qiyeId
      })
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.qiyeDetail = data
    }
  }

}
</script>

<style lang="scss">
.page {
  width: 100vw;
  height: 100vh;
  .navBar {
    display: flex;
    align-items: center;
    .nav_title {
      font-size: 36rpx;
      font-weight: 400;
      color: #000000;
      margin-left: 8rpx;
    }
  }
  .content {
    background-color: #F3F3F3;
    display: flex;
    flex-direction: column;
    .head-img {
      width: 100%;
      height: 300px;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
      .blank {
        background-color: #FFFFFF;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 10px;
        border-radius: 8px 8px 0 0;
      }
    }
    .detail {
      .part1 {
        background-color: #FFFFFF;
        padding: 0 15px;
        box-sizing: border-box;
        .price {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 24px;
          color: #0E9589;
          line-height: 34px;
          text-align: left;
          font-style: normal;
        }
        .desc {
          margin-top: 9px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #3D3D3D;
          line-height: 25px;
          text-align: left;
          font-style: normal;
        }
        .footer {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 10px 0;
          view {
            margin-left: 3px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #3D3D3D;
            line-height: 16px;
            text-align: left;
            font-style: normal;
          }
        }
      }
      .part2 {
        background-color: #FFFFFF;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 10px;
        .header {
          .title {
            font-family: HarmonyOS_Sans_SC_Medium;
            font-size: 18px;
            color: #333333;
            line-height: 25px;
            text-align: left;
            font-style: normal;
          }
          .title2 {
            margin-top: 4px;
            font-family: HarmonyOS_Sans_SC;
            font-size: 12px;
            color: #999999;
            line-height: 17px;
            text-align: left;
            font-style: normal;
          }
        }
      }
      .rich {
        background-color: #FFFFFF;
      }
    }
  }
}
</style>
